<template>
  <div>
    <div class="container">
      <div class="head-enroll">注册</div>

      <div class="accountbox">
        <div class="input-item">
          <div class="input-block">
            <svg
              t="1664109578147"
              class="icon bon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2608"
              width="200"
              height="200"
            >
              <path
                d="M625.834667 691.2h-256c-18.773333 0-34.133333 15.36-34.133334 34.133333s15.36 34.133333 34.133334 34.133334h256c18.773333 0 34.133333-15.36 34.133333-34.133334s-15.36-34.133333-34.133333-34.133333z"
                p-id="2609"
                fill="#bfbfbf"
              ></path>
              <path
                d="M728.234667 102.4h-460.8c-56.490667 0-102.4 45.909333-102.4 102.4v614.4c0 56.490667 45.909333 102.4 102.4 102.4h460.8c56.490667 0 102.4-45.909333 102.4-102.4V204.8c0-56.490667-45.909333-102.4-102.4-102.4z m34.133333 716.8c0 18.773333-15.36 34.133333-34.133333 34.133333h-460.8c-18.773333 0-34.133333-15.36-34.133334-34.133333V204.8c0-18.773333 15.36-34.133333 34.133334-34.133333h460.8c18.773333 0 34.133333 15.36 34.133333 34.133333v614.4z"
                p-id="2610"
                fill="#bfbfbf"
              ></path>
            </svg>
            <input
           
              type="text"
           
              maxlength="50"
              placeholder="请输入手机号"
              autocomplete="off"
              value=""
              v-model="phone"
            />
          </div>

          <div class="input-block">
            <svg
              t="1664122220919"
              class="icon bon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5958"
              width="200"
              height="200"
            >
              <path
                d="M874.666667 896H149.333333c-83.2 0-149.333333-66.133333-149.333333-149.333333V277.333333c0-83.2 66.133333-149.333333 149.333333-149.333333h725.333334c83.2 0 149.333333 66.133333 149.333333 149.333333v469.333334c0 83.2-66.133333 149.333333-149.333333 149.333333zM149.333333 213.333333c-36.266667 0-64 27.733333-64 64v469.333334c0 36.266667 27.733333 64 64 64h725.333334c36.266667 0 64-27.733333 64-64V277.333333c0-36.266667-27.733333-64-64-64H149.333333z"
                p-id="5959"
                fill="#bfbfbf"
              ></path>
              <path
                d="M270.933333 597.333333h-10.666666c-44.8 0-81.066667-36.266667-81.066667-81.066666v-10.666667c0-44.8 36.266667-81.066667 81.066667-81.066667h10.666666c44.8 0 81.066667 36.266667 81.066667 81.066667v10.666667c0 44.8-36.266667 81.066667-81.066667 81.066666zM512 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333zM757.333333 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333334 85.333333-38.4 85.333333-85.333334 85.333333z"
                p-id="5960"
                fill="#bfbfbf"
              ></path>
            </svg>
            <input
         
              type="text"
         
              maxlength="20"
              placeholder="请输入密码"
              autocomplete="off"
              value=""
              v-model="password"
            />
          </div>
          <div class="input-block">
            <svg
              t="1664122220919"
              class="icon bon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="5958"
              width="200"
              height="200"
            >
              <path
                d="M874.666667 896H149.333333c-83.2 0-149.333333-66.133333-149.333333-149.333333V277.333333c0-83.2 66.133333-149.333333 149.333333-149.333333h725.333334c83.2 0 149.333333 66.133333 149.333333 149.333333v469.333334c0 83.2-66.133333 149.333333-149.333333 149.333333zM149.333333 213.333333c-36.266667 0-64 27.733333-64 64v469.333334c0 36.266667 27.733333 64 64 64h725.333334c36.266667 0 64-27.733333 64-64V277.333333c0-36.266667-27.733333-64-64-64H149.333333z"
                p-id="5959"
                fill="#bfbfbf"
              ></path>
              <path
                d="M270.933333 597.333333h-10.666666c-44.8 0-81.066667-36.266667-81.066667-81.066666v-10.666667c0-44.8 36.266667-81.066667 81.066667-81.066667h10.666666c44.8 0 81.066667 36.266667 81.066667 81.066667v10.666667c0 44.8-36.266667 81.066667-81.066667 81.066666zM512 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333333 85.333333-38.4 85.333333-85.333333 85.333333zM757.333333 597.333333c-46.933333 0-85.333333-38.4-85.333333-85.333333s38.4-85.333333 85.333333-85.333333 85.333333 38.4 85.333334 85.333333-38.4 85.333333-85.333334 85.333333z"
                p-id="5960"
                fill="#bfbfbf"
              ></path>
            </svg>
            <input
         
              type="text"
              name="conpass"
              maxlength="20"
              placeholder="请再次输入密码"
              autocomplete="off"
              value=""
              v-model="repassword"
            />
          </div>

          <div class="input-block">
            <input
              id="Title"
              value="请输入验证码 "
              name="Title"
              onFocus="this.value=''"
              onBlur="if(!value){value=defaultValue;}"
            />

            <img src="../assets/img/验证码.png" alt="" />
          </div>
        </div>
      </div>

      <div class="form-tips">
        <div class="auto-login">
          <span>点击按钮代表您已阅读并同意</span>
          <a href="">《小说大全用户协议》</a>
        </div>
      </div>

      <div class="loginbox" @click="sendfun">
        <a href="javascript:;">立即注册</a>
      </div>

      <div class="form-tips">
        <div class="auto-login">
          <span>已有账号？</span>
          <router-link to="/LoginView">立刻登录</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{

        phone:"",
      password:"",
      repassword:""


      

    }

  
  },
  methods:{
    sendfun(){
      console.log("年纪")
        //1.验证手机号码
      let reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      // 2.验证密码
      let pass = /^[a-zA-Z]\w{5,17}$/;
      let repass =  /^[a-zA-Z]\w{5,17}$/;


      // 验证两次密码是否一致
      if(this.password !== this.repassword){
        this.$toast("两次输入密码不一致");
        return;
      }else{
        console.log("一致")
      }

      if (!reg.test(this.phone) || !pass.test(this.password || !repass(this.repassword))) {
        this.$toast("请输入正确的手机号码密码");
        return;
      }
        console.log("成功")
        



    

      



    }
  }
};
</script>

<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.container {
  max-width: 750px;
  min-width: 320px;
  margin: 0 auto;
  background-color: #f5f5f5;
}
a {
  text-decoration: none;
}
html,
body {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
}
ul,
ol {
  list-style: none;
}
.head-enroll {
  padding: 20px 15px 9px 15px;
  color: #333333;
  font-size: 16px;
}
.accountbox {
  .inputbox {
  }
}
.input-item {
  display: flex;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  background-color: #ffffff;
  padding-left: 12px;
  padding-right: 12px;
  flex-direction: column;
  .input-block {
    width: 100%;
    display: flex;
    height: 54px;
    line-height: 54px;
    background-color: #ffffff;
    align-items: center;
    border-bottom: 1px solid #eee;
    input {
      outline: none;
      border: 0px;
      font-size: 17px;
      color: #999999;
    }
    .icon {
      width: 20px;
      height: 20px;
      margin-right: 4px;
    }
    img {
      width: 110px;
      height: 54px;
    }
  }
}
/* .input-item .input-block:nth-child(2) .icon{
    width: 24px;
    height: 24px;
    margin-left: 10px;
} */
.input-block {
  img {
    height: 54px;
    width: auto;
    // line-height: 54px;
    // width: 100%;
    // text-align: center;
    // background: #ff9744;
    // color: #fff;
    // font-size: 14px;
  }
}
.inputsbox {
  margin-top: 10px;
  width: 100%;
  display: flex;
  height: 54px;
  line-height: 54px;
  background-color: #ffffff;
  align-items: center;
  input {
    outline: none;
    border: 0px;
    font-size: 17px;
    color: #999999;
  }
  .icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
  }
  .con {
    padding-top: 10px;
    margin-left: 77px;
  }
  .bon {
    padding-top: 10px;
    margin-left: 12px;
  }
}
.form-tips {
  padding: 20px 15px;
}
.auto-login {
  display: flex;
  span {
    font-size: 14px;
    color: #666;
  }
  a {
    font-size: 14px;
    color: #ff9744;
  }
}
.loginbox {
  width: 100%;
  background-color: #ff9744;
  display: flex;
  justify-content: center;
  a {
    height: 54px;
    line-height: 54px;
    color: #ffffff;
    font-size: 16px;
    letter-spacing: 0.3em;
  }
}
</style>